<template>
  <!-- 轮播图 Begin -->
  <div class="w-100% h-590px pos-relative flex flex-justify-center flex-items-center overflow-hidden" v-if="carouselList.length > 0">
    <div class="slider-container pos-relative">
      <el-image
        v-for="(item, index) in carouselList"
        :key="item.articleId"
        :src="item.picture"
        fit="cover"
        class="slider-image"
        :class="{ active: index === currentIndex }"
      >
      </el-image>
    </div>
    <!-- 内容 Begin -->
    <div
      class="select-none bg-#fff dark:bg-#333 pos-absolute top-50% left-50% w-60% p-x-20px p-y-16px flex flex-col flex-items-center shadow-[--el-box-shadow-light]"
      style="transform: translate(-50%, -50%)"
    >
      <!-- 文章类别 -->
      <div
        class="capitalize text-18px font-700 text-[--el-color-primary] tracking-1px"
        style="font-family: 'Dancing Script', cursive"
      >
        {{ carouselList[currentIndex].categoryName }}
      </div>
      <!-- 文章标题 -->
      <el-tooltip
        class="box-item"
        :content="carouselList[currentIndex].articleTitle"
      >
        <div
          class="capitalize text-#000 text-center text-30px <md:text-28px font-700 h-90px line-clamp-2 dark:text-#D8D8D8"
          style="font-family: 'Open Sans', sans-serif"
          @click="handleArticleContent(carouselList[currentIndex].articleId)"
        >
          {{ carouselList[currentIndex].articleTitle }}
        </div>
      </el-tooltip>
      <!-- 文章作者 AND 创建时间 -->
      <div
        class="text-center m-t-10px flex flex-row flex-justify-start flex-items-center line-clamp-1"
        style="font-family: 'Muli', sans-serif"
      >
        <div class="border-1px border-solid border-[--el-color-primary] w-34px h-34px p-1px rounded-full m-r-10px flex flex-justify-center flex-items-center">
          <el-image :src="avatarUrl" fit="cover" class="w-30px h-30px hover:opacity-70 rounded-full transition-all duration-600 transition-ease-in-out">
            <template #error>
              <el-image :src="errorUrl" fit="contain" class="w-30px h-30px"></el-image>
            </template>
          </el-image>
        </div>
        <div class="text-13px <sm:text-11px text-#1D1D1D dark:text-#D8D8D8 line-height-13px hover:text-[--el-color-primary] transition-all duration-600 transition-ease">
          {{ carouselList[currentIndex].createBy }}
        </div>
        <div class="text-[--el-color-primary] text-12px <sm:text-10px m-x-6px font-bold">﹣</div>
        <div class="text-13px <sm:text-11px text-#4B4F56 dark:text-#D8D8D8">{{ carouselList[currentIndex].createTime }}</div>
        <div class="text-[--el-color-primary] text-12px <sm:text-10px m-x-6px font-bold">﹣</div>
        <div class="text-13px <sm:text-11px text-#4B4F56 dark:text-#D8D8D8">{{ getFormatToK(carouselList[currentIndex].views) + ' Views' }}</div>
      </div>
    </div>
    <!-- 内容 End -->
    <div
      @mouseenter="handleMouseEnter"
      @mouseleave="handleMouseLeave"
      @click="handleSliderPrev"
      class="slider-prev pos-absolute left-16px bottom-50% bg-[rgba(0,0,0,0.12)] rounded-full border-1px border-solid border-#fff w-50px h-50px flex flex-justify-center flex-items-center text-#fff hover:bg-[rgba(0,0,0,0.26)]"
    >
      <el-icon :size="20"><ArrowLeft /></el-icon>
    </div>

    <div
      @mouseenter="handleMouseEnter"
      @mouseleave="handleMouseLeave"
      @click="handleSliderNext"
      class="slider-next pos-absolute right-16px bottom-50% bg-[rgba(0,0,0,0.12)] rounded-full border-1px border-solid border-#fff w-50px h-50px flex flex-justify-center flex-items-center text-#fff hover:bg-[rgba(0,0,0,0.26)]"
    >
      <el-icon :size="20"><ArrowRight /></el-icon>
    </div>
  </div>
  <!-- 轮播图 End -->

  <!-- 骨架屏 Begin -->
  <div v-else>
    <el-skeleton animated>
      <template #template>
        <el-skeleton-item variant="image" class="w-100% h-600px" />
      </template>
    </el-skeleton>  
  </div>
  <!-- 骨架屏 End -->
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { listCarousel } from "@/api/blog/article/index.ts";
import { koiMsgWarning, koiNoticeError } from "@/utils/koi.ts";
import { getFormatToK } from "@/utils/index.ts";
import errorUrl from "@/assets/images/error/404.png";

const carouselList = ref<any>([]);

/** 获取轮播图数据 */
const handleCarousel = async () => {
  try {
    const res = await listCarousel();
    carouselList.value = res.data;
  } catch (error) {
    console.log(error);
    koiNoticeError("数据查询失败，请刷新重试🌻");
  }
};

/** 文章内容 */
const handleArticleContent = (articleId: any) => {
  if (articleId) {
    console.log("文章内容->", articleId);
    window.open(`/article/content/${articleId}`, "_blank");
  } else {
    koiMsgWarning("未获取文章参数，请刷新页面重试");
  }
};

const avatarUrl = "https://pic3.zhimg.com/80/v2-cb928dab1abe5231fb87db69498de128_720w.webp";

const currentIndex = ref(0);
const handleSliderNext = () => {
  currentIndex.value = (currentIndex.value + 1) % carouselList.value.length;
};

const handleSliderPrev = () => {
  currentIndex.value = (currentIndex.value - 1 + carouselList.value.length) % carouselList.value.length;
};

const timer = ref<any>(null);
const handleSliderTimer = () => {
  if (!timer.value) {
    timer.value = setInterval(() => {
      handleSliderNext();
    }, 5000);
  }
};

const handleClearSliderTimer = () => {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
};

const handleMouseEnter = () => {
  handleClearSliderTimer();
};

const handleMouseLeave = () => {
  handleSliderTimer();
};

onMounted(() => {
  handleCarousel();
  handleSliderTimer();
});

onUnmounted(() => {
  handleClearSliderTimer();
});
</script>

<style lang="scss" scoped>
.slider-container {
  position: absolute;
  inset: 0px;
}

.slider-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.slider-image.active {
  opacity: 1;
}
</style>